<template>
  <layout-page :ifabout="true">
    <template v-slot:title>
      <span class="title1">{{ title }}</span>
      <span class="title2" v-if="this.name == '荔枝'">
        别名:离枝，无患子科，荔枝属</span
      >
      <span class="title2" v-if="this.name == '龙眼'"> 无患子科，龙眼属</span>
      <span class="title2" v-if="this.name == '杧果'">
        别名:芒果，漆树科，杧果属</span
      >
      <span class="title2" v-if="this.name == '甘蔗'"> 禾本科，甘蔗属</span>
      <span class="title2" v-if="this.name == '阳桃'"> 酢浆草科，阳桃属</span>
    </template>
    <template v-slot:menu>
      <el-menu default-active="morphologicalCharacteristics">
        <el-menu-item
          v-for="(item, index) in navigate"
          :key="index"
          :index="item.name"
          @click="handleClick(item.name, item.label)"
        >
          <el-icon><setting /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
      </el-menu>
    </template>
    <template v-slot:card>
      <el-card class="box-card" v-model="select">
        <template #header>
          <div class="card-header">
            <strong class="analyse-head">{{ select.title }}</strong>
          </div>
        </template>

        <img
          class="imgPlaces"
          src="../assets/lizhi.jpg"
          v-show="status == 2 && name == '荔枝'"
        />
        <img
          class="imgPlaces"
          src="../assets/yangtao.jpg"
          v-show="status == 2 && name == '阳桃'"
        />
        <img
          class="imgPlaces"
          src="../assets/longyan.jpg"
          v-show="status == 2 && name == '龙眼'"
        />
        <img
          class="imgPlaces"
          src="../assets/ganzhe.jpg"
          v-show="status == 2 && name == '甘蔗'"
        />
        <p class="imgPlaces" v-show="status == 2 && name == '杧果'" />
        <div class="text item picture" v-show="status == 1">
          <img :src="pics[0]" />
          <div class="right">
            <img
              v-for="(item, index) in pics.slice(1)"
              :key="index"
              :src="item"
            />
          </div>
        </div>
        <div class="text item oth" v-show="status == 3">
          <p>评估等级：EN</p>
          <p>
            基因信息：https://www.ncbi.nlm.nih.gov/gene/?term=Litchi+chinensis+Sonn.
          </p>
          <p class="pp">生长环境：</p>

          <img
            src="../assets/qx.jpg"
            style="width: 600px"
            v-if="this.name == '荔枝'"
          />
        </div>
        <div class="text item" v-show="status == 0">
          <p v-for="(item, index) in select.content" :key="index">
            {{ item }}
          </p>
        </div>
      </el-card>
    </template>
  </layout-page>
</template>

<script>
//import * as echarts from 'echarts'
import LayoutPage from '../components/layoutPage.vue'
import { getPlant } from "@/api/index";
export default {
  name: "About",
  components: { LayoutPage },
  data () {
    return {
      name: '',
      isOther: false,
      isPic: false,
      isplaces: false,
      title: '',
      detail: '',
      allMessage: '',
      navigate: [
        {
          label: '基本特征',
          name: 'morphologicalCharacteristics'
        },
        {
          label: '生长习性',
          name: 'growthHabits'
        },
        {
          label: 'APGⅢ分类',
          name: 'apg'
        },

        {
          label: '植物文化',
          name: 'plantCulture'
        },
        {
          label: '图片',
          name: 'pic'
        },
        {
          label: '详细地理分布',
          name: 'places'
        },
        {
          label: '其他信息',
          name: 'other'
        },

      ],
      select: {
        title: '',
        content: ''
      },
      pics: [],
      chartOption: {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150],
            type: 'line'
          }
        ],
        status: 0
      },
    }
  },
  methods: {
    handleClick (name, label) {
      //name是变量名称
      if (name === 'pic') {
        this.status = 1;
        this.select.title = label;
        this.pics = this.allMessage["imageUrl"].split("$");
      } else if (name === 'places') {
        this.status = 2;
        this.select.title = label;


      } else if (name === 'other') {
        this.status = 3
        this.select.title = label;
        /**
        console.log(document.querySelector('.pp'));
        console.log(document.getElementById('retainChart'))
        const retainChart = echarts.init(document.getElementById('retainChart'))
        retainChart.setOption(this.chartOption) */
      }
      else {
        this.status = 0;
        // this.isPic = false;
        // this.isOther = false;
        // this.places = false;
        this.select.title = label;
        this.select.content = [];
        this.select.content = this.allMessage[name].split("$");
        console.log(this.select.content)
        //获取对应内容
      }

    },
    getMessage () {
      getPlant({
        name: this.name
      })
        .then((res) => {
          console.log(res);
          this.allMessage = res;
          this.title = res.name;
          this.handleClick('morphologicalCharacteristics', '基本特征')

        })
        .catch(() => {
          this.$message.error('资源获取错误！');
        });
    },

  },
  mounted () {
    this.name = this.$route.query.name;
    this.getMessage();


    /** */
  }
};
</script>

<style scoped>
.about {
  height: 100%;
}

.title1 {
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  text-align: left;
}
.title2 {
  margin-left: 30px;
  font-size: 25px;
  font-weight: bold;
}
.el-menu-item.is-active {
  color: #fff;
  background-color: #95d475;
}
.box-card {
  width: 100%;
  height: 97%;
  position: relative;
}
.analyse-head {
  border-left: 4px #56ab2f solid;
  padding-left: 10px;
}
.right {
  position: absolute;
  display: inline-block;
}
.right img {
  width: 170px;
  height: 170px;
  margin: 0 10px;
}

.picture > img {
  position: relative;
  width: 45%;
}
.imgPlaces {
  position: absolute;
  left: 24%;
  width: 52%;
}
</style>
